<!DOCTYPE html>
<!-- idioma español-->
<html lang="es">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
	<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
	<script src="jQuery/jquery-1.9.1.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>

    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="bootstrap/css/docs.css" rel="stylesheet">
    <link href="bootstrap/css/prettify.css" rel="stylesheet">

	<title>Collapse</title>

</head>
  <body data-spy="scroll" data-target=".bs-docs-sidebar">

    <!-- Navbar
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Home</a>
              </li>
              <li class="">
                <a href="./getting-started.html">Get started</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="active">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="">
                <a href="./components.html">Components</a>
              </li>
              <li class="">
                <a href="./javascript.html">JavaScript</a>
              </li>
              <li class="">
                <a href="./customize.html">Customize</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

<!-- Subhead
================================================== -->
<header class="jumbotron subhead" id="overview">
  <div class="container">
    <h1>Base CSS</h1>
    <p class="lead">Fundamental HTML elements styled and enhanced with extensible classes.</p>
    
  </div>
</header>

<div class="bs-docs-sidebar">
	<ul class="nav nav-tabs bs-docs-sidenavMenu" data-role="listview" data-split-icon="gear" data-filter="true">
			
			
				<li class="controller">
					<a href="/cayas/agent/index">
						Agente
					</a>
				
				</li>
					
			
				<li class="controller">
					<a href="/cayas/alert/index">
						Alerta
					</a>
				
				</li>
			
		
				<li class="controller">
					<a href="/cayas/contact/index">
						Contacto
					</a>
				
				</li>
			
		
				<li class="controller">
					<a href="/cayas/customer/index">
						Cliente
					</a>
				
				</li>
			
				<li class="controller">
					<a href="/cayas/customsBroker/index">
						Despachante
					</a>
				
				</li>
			
				<li class="controller">
					<a href="/cayas/forwarder/index">
						Forwarder
					</a>
				
				</li>
			
				<li class="controller">
					<a href="/cayas/main/index">
						Home
					</a>
				
				</li>
			
				<li class="controller">
					<a href="/cayas/port/index">
						Puerto
					</a>
				
				</li>
			
		
				<li class="controller">
					<a href="/cayas/product/index">
						Artículo
					</a>
				
				</li>
			
		
				<li class="controller">
					<a href="/cayas/report/index">
						Reporte
					</a>
				
				</li>
				
			
				<li class="controller">
					<a href="/cayas/ship/index">
						Buque
					</a>
				
				</li>
			
		
				<li class="controller">
					<a href="/cayas/shipper/index">
						Shipper
					</a>
				
				</li>
			
				<li class="controller">
					<a href="/cayas/supplier/index">
						Proveedor
					</a>
				
				</li>
				
			
				<li class="controller active">
					<a href="/cayas/wish/index">
						Pedido
					</a>
				
				</li>
		
		
	</ul>
</div>

  <div class="container">

    <!-- Docs nav
    ================================================== -->
    <div class="row">
      <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav">
          <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
          <li><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
          <li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>
          <li><a href="#forms"><i class="icon-chevron-right"></i> Forms</a></li>
          <li><a href="#buttons"><i class="icon-chevron-right"></i> Buttons</a></li>
          <li><a href="#images"><i class="icon-chevron-right"></i> Images</a></li>
          <li><a href="#icons"><i class="icon-chevron-right"></i> Icons by Glyphicons</a></li>
        </ul>
      </div>
      <div class="span9">


        <!-- Typography
        ================================================== -->
        <section id="typography">
          <div class="page-header">
            <h1>Typography</h1>
          </div>

          <h2 id="headings">Headings</h2>
          <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>
          <div class="bs-docs-example">
            <h1>h1. Heading 1</h1>
            <h2>h2. Heading 2</h2>
            <h3>h3. Heading 3</h3>
            <h4>h4. Heading 4</h4>
            <h5>h5. Heading 5</h5>
            <h6>h6. Heading 6</h6>
          </div>

          <h2 id="body-copy">Body copy</h2>
          <p>Bootstrap's global default <code>font-size</code> is <strong>14px</strong>, with a <code>line-height</code> of <strong>20px</strong>. This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive a bottom margin of half their line-height (10px by default).</p>
          <div class="bs-docs-example">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
          </div>
          <pre class="prettyprint">&lt;p&gt;...&lt;/p&gt;</pre>

          <h3>Lead body copy</h3>
          <p>Make a paragraph stand out by adding <code>.lead</code>.</p>
          <div class="bs-docs-example">
            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
          </div>
          <pre class="prettyprint">&lt;p class="lead"&gt;...&lt;/p&gt;</pre>

          <h3>Built with Less</h3>
          <p>The typographic scale is based on two LESS variables in <strong>variables.less</strong>: <code>@baseFontSize</code> and <code>@baseLineHeight</code>. The first is the base font-size used throughout and the second is the base line-height. We use those variables and some simple math to create the margins, paddings, and line-heights of all our type and more. Customize them and Bootstrap adapts.</p>


          <hr class="bs-docs-separator">


          <h2 id="emphasis">Emphasis</h2>
          <p>Make use of HTML's default emphasis tags with lightweight styles.</p>

          <h3><code>&lt;small&gt;</code></h3>
          <p>For de-emphasizing inline or blocks of text, <small>use the small tag.</small></p>
          <div class="bs-docs-example">
            <p><small>This line of text is meant to be treated as fine print.</small></p>
          </div>
<pre class="prettyprint">
&lt;p&gt;
  &lt;small&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
&lt;/p&gt;
</pre>

          <h3>Bold</h3>
          <p>For emphasizing a snippet of text with a heavier font-weight.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
          </div>
          <pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>

          <h3>Italics</h3>
          <p>For emphasizing a snippet of text with italics.</p>
          <div class="bs-docs-example">
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
          </div>
          <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>

          <p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>

          <h3>Alignment classes</h3>
          <p>Easily realign text to components with text alignment classes.</p>
          <div class="bs-docs-example">
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
          </div>
<pre class="prettyprint linenums">
&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
</pre>

          <h3>Emphasis classes</h3>
          <p>Convey meaning through color with a handful of emphasis utility classes.</p>
          <div class="bs-docs-example">
            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          </div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>


          <hr class="bs-docs-separator">


          <h2 id="abbreviations">Abbreviations</h2>
          <p>Stylized implementation of HTML's <code>&lt;abbr&gt;</code> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a <code>title</code> attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.</p>

          <h3><code>&lt;abbr&gt;</code></h3>
          <p>For expanded text on long hover of an abbreviation, include the <code>title</code> attribute.</p>
          <div class="bs-docs-example">
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="attribute"&gt;attr&lt;/abbr&gt;</pre>

          <h3><code>&lt;abbr class="initialism"&gt;</code></h3>
          <p>Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.</p>
          <div class="bs-docs-example">
            <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
          </div>
          <pre class="prettyprint">&lt;abbr title="HyperText Markup Language" class="initialism"&gt;HTML&lt;/abbr&gt;</pre>


          <hr class="bs-docs-separator">

</div>
</div>


















	
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
		Collapsible Group Item #1
	      </a>
	    </div>
	    <div id="collapseOne" class="accordion-body collapse in">
	      <div class="accordion-inner">
		Anim pariatur cliche...
	      </div>
	    </div>
	  </div>
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
		Collapsible Group Item #2
	      </a>
	    </div>
	    <div id="collapseTwo" class="accordion-body collapse">
	      <div class="accordion-inner">
		Anim pariatur cliche...
	      </div>
	    </div>
	  </div>
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
		Collapsible Group Item #1
	      </a>
	    </div>
	    <div id="collapseThree" class="accordion-body collapse in">
	      <div class="accordion-inner">
		Anim pariatur cliche...
	      </div>
	    </div>
	  </div>
	  <div class="accordion-group">
	    <div class="accordion-heading">
	      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
		Collapsible Group Item #2
	      </a>
	    </div>
	    <div id="collapseFour" class="accordion-body collapse">
	      <div class="accordion-inner">
		Anim pariatur cliche...
	      </div>
	    </div>
	  </div>

    <script src="bootstrap/js/application.js"></script>

</body>
</html>
